In-page alerts

Overview

In-page alerts are a helpful tool for informing users about essential updates or modifications on a webpage, all while capturing their attention without disrupting their ongoing task.

Usually positioned at the top of a page after a submit action, these alerts are designed to be noticeable yet unobtrusive.

There are 4 types of in-page alerts in the Design System including:

• information
• success
• error
• warning.

Information

This is for things you should know, but they're not super important. They can be helpful tips or messages that don't need a lot of attention. In general, they're used for time-sensitive information.

Success

The success page alert is used for notifying the user they did something right or an action was successful, like submitting a form.

Error

The error page alert should be used with form validation errors or other errors that will block the user from completing their task. This is for when something really bad happens, like the website crashing.

Warning

Use warning page alerts to tell the user something urgent. Only use an alert if the information will help the user avoid a problem. This style of alert is used to warn you about something that might go wrong, like your password expiring.